<template>
  <div class="bg">
    <div class="login-left" id='imgs'>
      <img data-original="static/content/images/header/logo.png" src="static/content/images/header/logo.png" alt="">
    </div>
    <!-- <div class="login-right">
      <a href="#">访问官网</a>
    </div> -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
      <h3 class="title">欢迎登陆御算大师智能财务管理系统！</h3>
      <el-form-item prop="account">
        <el-input @keyup.enter.native="handleSubmit" type="text" v-model="ruleForm.account" size="large" auto-complete="off" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input @keyup.enter.native="handleSubmit" type="password" v-model="ruleForm.checkPass" size="large" auto-complete="new-password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" size="large" :loading="logining" class="login-submit">登录</el-button>
      </el-form-item>
   <!--    <p class="login-des">没有账号？
        <a href="#">立即注册</a>
      </p> -->
      <div v-if="isVersion" class="versions">
        <h3>圆智财务温馨提示：</h3>
        <strong>强烈建议您更换现代浏览器 以保证最佳效果 ^_^ </strong>
        <h3>请使用 <strong>Chrome</strong>
                  <strong>Safari</strong> 
                  <strong>firefox</strong> 
                  <strong>opera</strong>
        </h3>
        <p> <a href="javascript:;"><img src="../assets/chrome.png" alt=""></a>
            <a href="javascript:;"><img src="../assets/firefox.png" alt=""></a>
            <a href="javascript:;"><img src="../assets/opera.png" alt=""></a>
            <a href="javascript:;"><img src="../assets/safari.png" alt=""></a></p>
      </div>
    </el-form>
    <div class="footer-txt">
      <p>@2004-2017 Ebseek Company 广州圆智财税法律咨询服务有限公司</p>
      <p>粤ICP备10052550号-2</p>
    </div>
    <div class="wave-box">
      <div class="marquee-box marquee-up" id="marquee-box">
        <div class="marquee">
          <div class="wave-list-box" id="wave-list-box1">
            <ul>
              <li><img height="60" alt="波浪" src="static/content/images/login/wave_02.png"></li>
            </ul>
          </div>
          <div class="wave-list-box" id="wave-list-box2">
            <ul>
              <li><img height="60" alt="波浪" src="static/content/images/login/wave_02.png"></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="marquee-box" id="marquee-box3">
        <div class="marquee">
          <div class="wave-list-box" id="wave-list-box4">
            <ul>
              <li><img height="60" alt="波浪" src="static/content/images/login/wave_01.png"></li>
            </ul>
          </div>
          <div class="wave-list-box" id="wave-list-box5">
            <ul>
              <li><img height="60" alt="波浪" src="static/content/images/login/wave_01.png"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
export default {
  name: 'login',
  data() {
    return {
      logining: false,
      isVersion: false,
      fullscreenLoading:false,
      ruleForm: {
        account: '',
        checkPass: ''
      },
      rules: {
        account: [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'

        }]
      },
    }
  },
  created() {
    this.$nextTick(() => {
      var viewer = new Viewer(document.getElementById('imgs'), {
        url: 'data-original'
      })
    })
  },
  mounted() {
    this.animation();//执行动画
    this.version();//版本判断
    this.init();
  },
  methods: {
    init(){
      let username = localStorage.getItem('user');
      this.ruleForm.account = username || '';
    },
    //判断是否IE版本
    version(){
      var userAgent = navigator.userAgent;
      var isOpera = userAgent.indexOf("Opera") > -1;
      if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        this.isVersion = true;//如果是IE内核 则显示提示
      }; 
    },
    handleSubmit(ev) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.logining = true;
          let loginParams = {
            Account: this.ruleForm.account,
            Password: this.ruleForm.checkPass
          }
          axios.post("login", loginParams).then(data => {
            localStorage.setItem('user',loginParams.Account);
            this.logining = false;
            if (data == 3) {
              sessionStorage.setItem('isLogin',true);
              setTimeout(() => {
						    this.fullscreenLoading = false;
					    }, 800);
              this.$router.push('/Home');//首页
              this.ruleForm = {
                account : '',
                checkPass : ''
              }
            } else if (data == 6) {
              sessionStorage.setItem('isLogin', true);
              setTimeout(() => {
						    this.fullscreenLoading = false;
					    }, 800);
              this.$router.push('/Branch');//选套
              this.ruleForm = {
                account : '',
                checkPass : ''
              }
            } else {
              this.$message({
              message: "账号或密码错误",
              type: 'error'
            })
            this.logining = false;
          }
        }).catch(err => {
          console.log(err);
        })} else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    animation(){
      //*        底部波浪动画         */
      let marqueeScroll = function(id1, id2, id3, timer) {
        let $parent = $("#" + id1);
        let $goal = $("#" + id2);
        let $closegoal = $("#" + id3);
        $closegoal.html($goal.html());
        const Marquee = () => {
          if (parseInt($parent.scrollLeft()) - $closegoal.width() >= 0) {
            $parent.scrollLeft(parseInt($parent.scrollLeft()) - $goal.width());
          } else {
            $parent.scrollLeft($parent.scrollLeft() + 1);
          }
        }
        setInterval(Marquee, timer);
      }
      let marqueeScroll1 = new marqueeScroll("marquee-box", "wave-list-box1", "wave-list-box2", 15);
      let marqueeScroll2 = new marqueeScroll("marquee-box3", "wave-list-box4", "wave-list-box5", 25);
      /**           end             */
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../common/css/index.css';
.viewer-toolbar {
  height:500px;
}
.viewer-toolbar li{
  width:100px;
  height:100px;
  padding:50px;
}
.bg {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  background-color: #4a6fb3;
  -moz-box-shadow: inset 0 0 500px #3b5b98;
  -webkit-box-shadow: inset 0 0 500px #3b5b98;
  box-shadow: inset 0 0 500px #3b5b98;
  overflow: hidden;
  .login-left {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px 20px;
    margin-top:-50px;
    img{
      width:100%;
      height:100%;
    }
  }
  .login-right {
    color: #FFF;
    float: right;
    margin: 50px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 25px;
    border: 1px solid #FFF;
    cursor: pointer;
    a {
      color: #fff;
    }
  }
  .login-container {
    background-clip: padding-box;
    margin: 30vh auto;
    width: 350px;
    padding: 35px;
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
      font-size: 28px;
      color: #fff;
    }
    .icon {
      position: absolute;
      left: 0;
      text-align: center;
      line-height: 40px;
      width: 40px;
      height: 40px;
      z-index: 999;
    }
    .login-des {
      text-align: center;
      margin-top: 20px;
      color: #fff;
      a {
        color: #fff;
        text-decoration: underline;
      }
    }
    .versions{
      text-align:center;
      margin-top:20px;
      h3{
        color:#fff;
        font-weight:100;
        margin:10px 0;
      }
      strong{
        color:rgb(255, 251, 0);
        font-weight:100;
      }
      p img{
        width:50px;
        height:50px;
        margin:10px;
      }
    }
  }
  .footer-txt {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 50px;
    color: #a8c6ff;
    z-index: 2;
  }
  .wave-box {
    position: absolute;
    height: 60px;
    bottom: 0;
    width: 100%;
    .marquee-box {
      overflow: hidden;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      .marquee {
        width: 8000%;
        height: 60px;
        .wave-list-box {
          float: left;
          ul {
            float: left;
            height: 60px;
            overflow: hidden;
            zoom: 1;
            margin: 0;
            padding: 0;
            li {
              height: 60px;
              width: 100%;
              float: left;
              line-height: 30px;
              list-style: none;
            }
          }
        }
      }
    }
  }
}
</style>